/*
  我们这个系统中的特色: 权限控制???
    => 根据用户的menus控制路由规则(代码有点复杂)

  rbac  给员工分配了角色   给角色分配了权限

    =》 这些工作是有意义的，在于将来只要完成了 rbac 这套  用户信息中有一个关键字段 menus 表示这个用户可以看到的所有页面

    有些页面是需要进行权限控制的   social  salary   attendance ... 8个页面
        路由规则要控制      动态路由规则  8个

    有些页面是不需要进行权限控制的  login  dashboard   404  3个页面
        路由规则不用控制     静态路由规则 3个
*/

import Vue from 'vue'
import Router from 'vue-router'

import department from './modules/department'
import approval from './modules/approval'
import attendance from './modules/attendance'
import role from './modules/role'
import salary from './modules/salary'
import social from './modules/social'
import employee from './modules/employee'
import permission from './modules/permission'

Vue.use(Router)

/* Layout */
// 实际开发中layout放哪都行  只不过我们这个项目多次用到layout页面 => 直接放在src里
// layout页面往往是不需要懒加载效果的!!!
import Layout from '@/layout' // 直接加载 导入

/**
 * constantRoutes
 * a base page that does not have permission requirements
 * all roles can be accessed
 */
// 就是不需要控制的3个静态路由规则
export const constantRoutes = [
  // 登录页
  {
    path: '/login',
    component: () => import('@/views/login/index'), // 懒加载 异步组件
    hidden: true
  },

  // 404页面(配合最后一条规则!!!)
  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },

  // layout首页  将来还有数据看板页(二级页面)
  // 二级路由页面除了刚刚那种标准写法以外  还有更加易于维护的写法
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [
      // 第一个 数据看板页面
      {
        path: 'dashboard',
        name: 'Dashboard', // 命名路由
        component: () => import('@/views/dashboard'),
        meta: { title: '首页', icon: 'dashboard' } // ???
      }

      // 其他二级页面
      // {
      //   path: 'department',
      //   name: 'Department', // 命名路由
      //   component: () => import('@/views/department'),
      //   meta: { title: '组织架构', icon: 'drag' } // ???
      // },
      // {
      //   path: 'approval',
      //   name: 'approval', // 命名路由
      //   component: () => import('@/views/approval'),
      //   meta: { title: '审批', icon: 'bug' } // ???
      // },
      // {
      //   path: 'attendance',
      //   name: 'attendance', // 命名路由
      //   component: () => import('@/views/attendance'),
      //   meta: { title: '考勤', icon: 'edit' } // ???
      // },
      // {
      //   path: 'employee',
      //   name: 'employee', // 命名路由
      //   component: () => import('@/views/employee'),
      //   meta: { title: 'Dashboard', icon: 'dashboard' } // ???
      // },
      // {
      //   path: 'permission',
      //   name: 'permission', // 命名路由
      //   component: () => import('@/views/permission'),
      //   meta: { title: 'Dashboard', icon: 'dashboard' } // ???
      // },
      // {
      //   path: 'role',
      //   name: 'role', // 命名路由
      //   component: () => import('@/views/role'),
      //   meta: { title: 'Dashboard', icon: 'dashboard' } // ???
      // },
      // {
      //   path: 'salary',
      //   name: 'salary', // 命名路由
      //   component: () => import('@/views/salary'),
      //   meta: { title: 'Dashboard', icon: 'dashboard' } // ???
      // },
      // {
      //   path: 'social',
      //   name: 'social', // 命名路由
      //   component: () => import('@/views/social'),
      //   meta: { title: 'Dashboard', icon: 'dashboard' } // ???
      // }
    ]
  }

  // department,
  // role,
  // employee,
  // permission,
  // attendance,
  // approval,
  // salary,
  // social,

  // 404 这条规则必须在最后 !!!  他是一个规范 会出问题
  // { path: '*', redirect: '/404', hidden: true }
]

// 表示8个动态路由规则(需要控制的)  => 这个由8个动态路由规则组成的数组将来在别的地方需要用到 先导出
export const asyncRoutes = [
  department,
  approval,
  attendance,
  role,
  salary,
  social,
  employee,
  permission
]

/*
  我们一般配规则是在哪配?  new Router({ routes: [{}, {}] })
    初始化规则(静态路由规则-不需要控制的)

  但是如果有一些规则是根据不同的人 去添加不同的路由规则
    router.addRoutes([{}, {}, {}...])
*/

const createRouter = () => new Router({
  mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

const router = createRouter() // 这是项目中唯一的路由实例

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
// 重置路由规则
export function resetRouter() {
  const newRouter = createRouter() // 得到一个新的路由实例
  // router = newRouter
  router.matcher = newRouter.matcher // 重置路由规则(路由实例还是那个路由实例 但是里面的规则已经被新的路由实例替换了)
}

export default router

/*
  我们希望在真正上线之前 看一看项目的体积到底有多大
    - 打包试试看 yarn build:prod 会多一个文件夹dist(这个文件夹给运维工程师/后端/前端领导) 2.8M
    - yarn preview -- --report 会帮你基于我们打包好的dist产出一份专业的体积报告
      帮助我们去掉了项目中无用的mock

  目标很明确: 就是要减小体积(从大的开始优化 elementui  vue  cos-js-sdk-v5)
    - 我们一定不能将这三块打包到dist中去 体积下不来  => 告诉webpack这三个不用打包了
    - 我们还得找别的替换这三块 否则项目起不来 => cdn加速(不再使用npm下载包 也不需要通过dist打包 而是直接采用在线链接(优化-就近访问资源)的方式) - 收费居多 免费的少一些(bootcdn)

  利用nginx上线项目 你需要将dist交给nginx 现场打包一份dist出来

*/
